<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #id20{
            border: 1px black solid;
            height: 150px;
            width: 150px;
            position: relative;
        }
    </style>
</head>
<body>
    <pre>
        JQuery操作DOM：
            网页内容的划分：
            元素节点
            属性节点
            文本节点
            注释节点

        文本节点：
            text()   设置和获取文本节点[只能识别纯文本]
            html()   设置和获取文本节点[能识别标签]
            注意：    无参表示获取，有参表示设置

        属性节点：
            val()    只获取和设置value属性
            注意：    无参表示获取，有参表示设置
            attr()   设置和获取属性节点
                     获取属性通过写一个属性名参数即可
                     设置属性通过写属性名和属性值等多个参数
                     加多个属性用JSON格式
            removeAttr() 删除属性节点

        元素节点：
            创建元素节点：
                  页面中不存在的节点：$(html)  $(document.createElement())
                  页面中已存在的节点：$(选择器).clone(boolean)  true克隆事件，false不克隆事件
            插入元素节点：    
                往父标签内的前面添加
                    父元素.prepend(子元素)
                    子元素.prependTo(父元素)
                往父标签内的后面添加
                    父元素.append(子元素)
                    子元素.appendTo(父元素)
                往参照标签外的前面添加
                    参照节点.before(新增节点)
                    新增节点.insertBefore(参照节点)
                往参照标签外的后面添加
                    参照节点.after(新增节点)
                    新增节点.insertAfter(参照节点)
            删除节点：
                remove()
            替换节点：
                老节点.replaceWith(新节点)
                新节点.replaceAll(老节点) 

        层次关系：
            parent()   一级父元素
            children() 一级子元素[只获取元素节点] 
                       可以添加参数：选择器  
            next()     下一个同辈元素
            prev()     上一个同辈元素
            siblings()  同辈元素
        遍历方法：
            each(function(下标,元素节点){})

        end( )：结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态

        JQuery的CSS-DOM操作：
            css()     获取设置样式
            height()  获取设置元素高度
            width()   获取设置元素宽度
            offset().top   只能获取元素距离body的上距离
            offset().left  只能获取元素距离body的左距离
            offsetParent() 只能获取设置定位的最近父元素
            position()     只能获取元素距离父元素的距离[top left]
            scrollLeft()   获取设置滚动条左边的距离
            scrollTop()     获取设置滚动条上边的距离
    </pre>

    <p id="id1">
        <span>第一段</span>
    </p>
    <p>
        <input type="button" id="id3" value="演示属性节点操作" />
        <input type="text" id="id2" abc="111" />
    </p>

    <a id="id4" href="1.html" target="_blank">超链接一</a>
    <a id="id5" >超链接二</a>

    <hr/>

    <input type="button" value="创建元素节点" id="id6"/>
    <div id="id7">演示节点的复制</div>
    <input type="button" value="创建元素节点2" id="id8"/>
    <div id="parent">

    </div>

    <br/>
    <br/>

    <ul>
        <li>第一项</li>
        <li id="idX">第二项</li>
        <li>第三项</li>
    </ul>
    <input type="button" value="父节点内前置增加" id="id9"/>
    <input type="button" value="父节点内后置增加" id="id10"/>
    <input type="button" value="参照节点前面增加" id="id11"/>
    <input type="button" value="参照节点后面增加" id="id12"/>
    <br/><br/>

    <input type="button" value="删除节点" id="id13"/>
    <input type="button" value="替换节点" id="id14"/>

    <br/>
    <br/>

    <input type="button" value="父节点" id="id15"/>
    <input type="button" value="子节点/循环方法" id="id16"/>
    <input type="button" value="同辈节点" id="id18"/>
    <input type="button" value="end方法" id="id19"/>

    <ul id="id17"></ul>

    <br/>
    <br/>

    <input type="button" value="cssDOM高宽" id="id21"/>
    <input type="button" value="cssDOM位置距离" id="id22"/>
    <div id="id20">
        <div style="height: 5px;"></div>
        <p id="id23" >段落</p>
    </div>
    <input type="button" value="滚动距离" id="id24"/>

    <br/>
    <br/>
    <br/>
    <br/>
    <script type="text/javascript" src="js/jQuery.js"></script>
    <script type="text/javascript" src="js/chapter3.js"></script>
</body>
</html>